<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>密码框验证信息</title>
		<style type="text/css">
			.register {
				margin: 100px auto;
				width: 600px;
			}

			.ipt {
				float: left;
			}

			.message {
				display: inline-block;
				font-size: 12px;
				color: #999;
				background: url(../images/tishi.png) no-repeat left center;
				padding-left: 15px;
				margin-left: 10px;
			}

			.ipt {
				float: left;
				margin-top: 10px;
			}

			.wrong {
				color: red;
				background-image: url(../images/cuowu.png);
			}

			.right {
				color: green;
				background-image: url(../images/icon-test.png);
			}
		</style>
	</head>
	<body>
		<div class="register">
			<input type="text" class="ipt">
			<p class="message">请输入6~16位密码</p>
		</div>
		<script type="text/javascript">
			var ipt = document.querySelector('.ipt');
			var message = document.querySelector('.message');
			ipt.onblur = function() {
				if (this.value.length < 6 || this.value.length > 16) {
					message.className = 'message wrong';
					message.innerHTML = '你输入的位数不对！(要求6~16位)';
				} else {
					message.className = 'message right';
					message.innerHTML = '输入正确';
				}
			}
		</script>
	</body>
</html>
